<template xmlns:float="http://www.w3.org/1999/xhtml">
  <b-container class="page-home text-lg-left my-3">
    <b-row v-for="(data,index) in datas" :key="index">
      <b-col col>
        <b-card
            :img-src=data.avatar
            img-alt="Image"
            img-width="120rem"
            img-left
            class="my-3">
          <b-card-text>
            <b-link @click="jump(data.id,data.name)">
              <b>{{ data.name }}</b>
            </b-link>
          </b-card-text>
          <b-card-text>
            {{ data.description }}
            <a style="float: right">主题数：{{data.topicCount}}</a><br>
            <a style="float: right">评论数：{{data.commentCount}}</a>
          </b-card-text>
        </b-card>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>

import axios from "axios";

export default {
  name: "TopicCard",
  data() {
    return {
      datas: []
    }
  },
  methods: {
    jump(id, title) {
      console.log("category title:",title)
      this.$router.push({name: "topics", query: {category: id, title: title}});
    }
  },
  created() {
    axios
        .get("dev_api/categories")
        .then(response => {
          if (response.data.code === 200) {
            this.datas = response.data.data
            console.log("categories请求response：",response.data.data)
          } else {
            console.log("请求错误")
          }
        })
        .catch(error => {
          console.log(error)
        });


  }
}
</script>

<style scoped>

</style>